<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-input placeholder="筛选关键字" v-model="selectSongList" clearable class="handle-input"></el-input>
        <!--        添加歌单按钮-->
        <el-button type="primary"  @click="AdddialogVisible = true">添加歌单</el-button>
        <el-button type="danger"  @click="deleteSongListAll">批量删除</el-button>
      </div>
    </div>
    <!--    歌单信息表单区域-->
    <el-table :data="allSongListTableDate" style="width: 100% " border height="600px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column label="歌单图片" width="110" align="center">
        <template slot-scope="scope">
          <div class="songList-img">
            <img :src="getImgUrl(scope.row.pic)"  style="width: 100%"  />
          </div>
          <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeSongListAvatorUpload" :on-success="handleSongListAvatorSuccess" >
            <el-button type="primary" size="mini" >更新图片</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="120" align="center"></el-table-column>
      <el-table-column label="简介" >
        <template slot-scope="scope">
          <p style="height: 100px;overflow: scroll">
            {{scope.row.introduction}}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="style" label="风格" width="120" align="center"></el-table-column>
      <el-table-column label="歌曲管理"  width="110" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="editSong(scope.row.id)">歌曲管理</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="handleEdit(scope.row)" >编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页功能区域-->
    <div class="PageNation">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="SongListTableDate.length">
      </el-pagination>
    </div>

    <!--    添加歌单对话框-->
    <el-dialog title="添加歌单" :visible.sync="AdddialogVisible" width="420px" center >
      <!--      表单内容区域-->
      <el-form :model="AddSongListfRuleForm" :rules="AddSongListRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="AddSongListfRuleForm.title"  placeholder="歌单名"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="AddSongListfRuleForm.introduction"  placeholder="简介" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="风格" prop="style">
          <el-input v-model="AddSongListfRuleForm.style"  placeholder="风格"></el-input>
        </el-form-item>
      </el-form>
      <!--      按钮区域-->
      <span slot="footer">
        <el-button @click="AdddialogVisible = false" >取 消</el-button>
        <el-button type="primary" @click="addSongList" >确 定</el-button>
      </span>
    </el-dialog>

    <!--    修改歌单对话框-->
    <el-dialog title="修改歌单信息" :visible.sync="EditdialogVisible" width="420px" center >
      <!--      表单内容区域-->
      <el-form :model="EditSongListRuleForm" :rules="EditingerRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="EditSongListRuleForm.title"  placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="EditSongListRuleForm.introduction"  placeholder="简介" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="风格" prop="style">
          <el-input v-model="EditSongListRuleForm.style"  placeholder="风格"></el-input>
        </el-form-item>
      </el-form>
      <!--      按钮区域-->
      <span slot="footer">
        <el-button @click="EditdialogVisible = false" >取 消</el-button>
        <el-button type="primary" @click="editSongList" >确 定</el-button>
      </span>
    </el-dialog>

    <!--    删除对话框-->
    <el-dialog title="提示" :visible.sync="DeleteVisible" width="30%" >
      <div align="center">
        <span>是否确定删除</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="DeleteVisible = false">取 消</el-button>
        <el-button size="mini" type="danger" @click="DelteSongListRow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {delteSongList, getAllSongList, setSongList, updateSongList} from "../api";
import {mixin} from "../mixinx";

export default {
  name: "SongList",
  mixins: [mixin],
  data() {
    return {
      AdddialogVisible: false,
      EditdialogVisible:false,
      DeleteVisible:false ,
      AddSongListfRuleForm: {
        title: '',
        introduction:'',
        style:'',
      },
      EditSongListRuleForm:{
        id:'',
        title: '',
        introduction:'',
        style:'',
      },
      AddSongListRules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
      },
      EditingerRules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
      },
      SongListTableDate:[],
      tempDate:[],
      selectSongList:'',
      pageSize:5,         //当前分页大小
      currentPage:1,      //当前页面
      idx:-1,       //当前选择项id
      multipleSelection:[],  //表格的多选项
    }
  },
  watch:{
    // 监听搜索歌单信息框，随输入文字变化
    selectSongList: function(){
      if(this.selectSongList == ''){
        this.SongListTableDate = this.tempDate;
      }else{
        this.SongListTableDate = [];
        for(let item of this.tempDate){
          if(item.title.includes(this.selectSongList)){
            this.SongListTableDate.push(item);
          }
        }
      }
    }
  },
  computed:{
    // 计算当前歌单表里的所有歌单数据
    allSongListTableDate(){
      return this.SongListTableDate.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  },
  created() {
    this.getSongListDate()
  },

  methods: {
    // 查询所有歌单
    getSongListDate(){
      this.tempDate=[]
      this.SongListTableDate=[]
      getAllSongList().then(res=>{
        this.tempDate=res
        this.SongListTableDate=res
        this.currentPage=1
      })
    },
    // 添加歌单事件
    addSongList(){
      let params=new URLSearchParams()
      params.append('title',this.AddSongListfRuleForm.title)
      params.append('pic','/img/songListPic/123.jpg')
      params.append('introduction',this.AddSongListfRuleForm.introduction)
      params.append('style',this.AddSongListfRuleForm.style)
      setSongList(params).then(res =>{
        console.log(res)
        if(res.code==1){
          this.getSongListDate()
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          });
        }else {
          this.$message({
            showClose: true,
            message: '添加失败',
            type: 'error'
          });
        }
      }).catch(err =>{
        console.log(err)
      })
      this.AdddialogVisible=false

    },
    // 把当前要修改的歌单信息id传入修改对话框
    handleEdit(row){
      this.EditdialogVisible=true
      this.EditSongListRuleForm={
        id:row.id,
        title:row.title,
        introduction:row.introduction,
        style:row.style
      }
    },
    // 修改歌单信息
    editSongList(){
      let params=new URLSearchParams()
      params.append('id',this.EditSongListRuleForm.id)
      params.append('title',this.EditSongListRuleForm.title)
      params.append('introduction',this.EditSongListRuleForm.introduction)
      params.append('style',this.EditSongListRuleForm.style)
      updateSongList(params).then(res =>{
        console.log(res)
        if(res.code==1){
          this.getSongListDate()
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          });
        }else {
          this.$message({
            showClose: true,
            message: '修改失败',
            type: 'error'
          });
        }
      }).catch(err =>{
        console.log(err)
      })
      this.EditdialogVisible=false
    },
    // 确定删除歌单
    DelteSongListRow(){
      delteSongList(this.idx).then(res =>{
        if(res){
          this.getSongListDate()
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          });
        }else {
          this.$message({
            showClose: true,
            message: '删除失败',
            type: 'error'
          });
        }
      })
      this.DeleteVisible=false
    },
    // 更新图片
    uploadUrl(id){
      return `${this.$store.state.HOST}/songList/updateSongListrPic?id=${id}`
    },
    // 获取当前页
    handleCurrentChange(val){
      this.currentPage=val
    },
    // 当前页的显示大小
    handleSizeChange(val){
      this.pageSize=val
    },
    // 转向歌曲管理页面
    editSong(id){
      this.$router.push({path:`/ListSong`,query:{id}})
    }
  }
}
</script>

<style scoped>
.handle-box{
  margin-bottom: 20px;
}
.songList-img{
  width: 100%;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}
.handle-input{
  width: 300px;
  display: inline-block;
}
.PageNation{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>



























